<template>
    <div>
        <el-form :inline="true" :model="keyword" class="demo-form-inline">
            <el-form-item label="IP地址">
                <el-input v-model="keyword.ip" placeholder="Ip地址"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="keyword.name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>

                <el-button type="primary" plain size="small" @click="downloadExcel" icon="el-icon-download">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="logTime" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="ip" label="IP地址" width="180">
            </el-table-column>
            <el-table-column prop="log" label="类型" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage">
        </el-pagination>
        <!-- 上传excel的对话框 -->
        <el-dialog title="上传计量单位Excel" :visible.sync="dialogExcelVisible" width="40%">
            <el-upload class="upload-demo" drag action="http://localhost:8888/log/logrecord/upload" accept=".xlsx,.xls"
                :on-success="uploadExcelSuccess" :on-error="uploadExcelError" multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
import { findAll } from '@/api/logrecord'
export default {
    data() {
        return {
            keyword: {
                ip: '',
                name: ''
            },
            tableData: [],
            dialogExcelVisible: false,
            currentPage: 1,
            pageNum: 1,
            pageSize: 10,
            totalPage: 0,
        }
    },
    created() {
        this.getLogList()
    },
    methods: {
        getLogList() {
            const pages = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                ip:this.keyword.ip,
                name:this.keyword.name
            }
            findAll(pages).then(res => {
                console.log("getLogList",res)
                this.tableData = res.data.list
                this.totalPage = res.data.total
            })
        },
        onSubmit() {
            this.pageNum = 1
            this.getLogList()
        },
        uploadExcelSuccess() {
            this.$message({
                type: "success",
                message: "上传成功"
            })
            this.dialogExcelVisible = false;
            this.getList();
        },
        downloadExcel() {
            this.$confirm('确定要导出数据吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // downloadExcel().then(res => {
                //     tableData = res.data.list
                // })
                // 方案1: 原生js方式发起导出excel请求,后端设置响应格式
                window.location.href = "http://localhost:8888/log/logrecord/download"
                // 方案1的话后端需要设置响应格式和内容
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消导出数据！'
                })
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getLogList()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getLogList()
        },

    }
}
</script>

<style lang="scss" scoped></style>